<template>
  <div class="climate">

    <div class="main-container">

      <div class="left-menu" style="margin-top: 10px">
        <div class="station-information">
          <div>
            <el-input
                v-model="station_id"
                style="max-width: 600px"
                placeholder="请输入站号"
            >
              <template #prepend>站号</template>
            </el-input>
          </div>
          <div>
            <el-input
                v-model="month_list"
                style="max-width: 600px"
                placeholder="请输入月份，如：1,2,3"
            >
              <template #prepend>月份</template>
            </el-input>
          </div>
          <div>
            <el-input
                v-model="input1"
                style="max-width: 600px"
                placeholder="Please input"
            >
              <template #prepend>站名</template>
            </el-input>
          </div>
        </div>

        <div class="cal-button">
          <el-button type="success" round @click="getDataList()">获取数据</el-button>
          <el-button type="success" round>开始计算</el-button>
        </div>

      </div>
      <div class="right-content">
          <div class="table-box">
            <div class="table-box-item">
              <el-table
                  :data="tableDataTemp"
                  align="center"
              >
                <el-table-column align="center" prop="Station_Id_C" label="站号" width="100"/>
                <el-table-column align="center" prop="Mon_Seq" label="月份" width="100"/>
                <el-table-column align="center" prop="TEM_Avg" label="温度" width="100"/>
              </el-table>
            </div>

            <div class="table-box-item">
              <el-table
                  :data="tableDataRain"
                  align="center"
              >
                <el-table-column align="center" prop="Station_Id_C" label="站号" width="100"/>
                <el-table-column align="center" prop="Mon_Seq" label="月份" width="100"/>
                <el-table-column align="center" prop="PRE" label="降水" width="100"/>
              </el-table>
            </div>

            <div class="table-box-item">
              <el-table
                  :data="tableDataRain"
                  align="center"
              >
                <el-table-column align="center" prop="Station_Id_C" label="站号" width="100"/>
                <el-table-column align="center" prop="Mon_Seq" label="月份" width="100"/>
                <el-table-column align="center" prop="PRE" label="温度" width="100"/>
              </el-table>
            </div>

            <div class="table-box-item">
              <el-table
                  :data="tableDataRain"
                  align="center"
              >
                <el-table-column align="center" prop="Station_Id_C" label="站号" width="100"/>
                <el-table-column align="center" prop="Mon_Seq" label="月份" width="100"/>
                <el-table-column align="center" prop="PRE" label="温度" width="100"/>
              </el-table>
            </div>


          </div>


        <div class="chart-box">
          <div ref="tempChartDom" class="chart-box-item">
          </div>
          <div ref="rainChartDom" class="chart-box-item">
          </div>
        </div>

      </div>


    </div>


  </div>
</template>

<script lang="ts" setup>


import {getRain, getTemp, success_code, success_message} from "../../utils/api";
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import router from "../../router";
import {toastE} from "../../utils/toast";
import * as echarts from 'echarts';

const station_id = ref()
const month_list = ref()
const input1 = ref('')
const tempChartDom = ref(null);
const rainChartDom = ref(null);
let chartInstance_temp = null;
let chartInstance_rain = null;
let monthList = ref([1,4,7,10])
let tempList = ref([4,8,9,14])
let rainList = ref([4,8,9,14])
let tableDataTemp: tempResult[] = ref()
let tableDataRain= ref()
let postResult: postResult = ref()

interface tempResult {
  Mon_Seq: string
  Station_Id_C: string
  TEM_Avg: string
}

interface postResult {
  station_id: string
  month_list: string
}

function getDataList(){
  postResult.station_id=station_id.value
  postResult.month_list=month_list.value

  getTemp(postResult).then(res => {
    if (res.returnMessage === success_message) {
      tableDataTemp.value = res.DS
      monthList.value = res.DS.map(item => item.Mon_Seq)
      tempList.value = res.DS.map(item => item.TEM_Avg).map(temperatureString => parseFloat(temperatureString));


      temp_chart(chartInstance_temp,monthList,tempList)
    } else {
      toastE(res.message, 'error')
    }
  })


  getRain(postResult).then(res => {
    if (res.returnMessage === success_message) {
      tableDataRain.value = res.DS
      monthList.value = res.DS.map(item => item.Mon_Seq)
      rainList.value = res.DS.map(item => item.PRE).map(temperatureString => parseFloat(temperatureString));
      // temp_chart()
      console.log(rainList)

      temp_chart(chartInstance_rain,monthList,rainList)

    } else {
      toastE(res.message, 'error')
    }
  })





}


async function temp_chart(a,b,c) {
  await nextTick();
  const option = {
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
    color: ['#80FFA5'],
    title: {
      text: '温度趋势图'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: b.value
    },
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '温度曲线',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: c.value
      },
    ]
  };
  a.setOption(option);
}

onMounted(() => {

  chartInstance_temp = echarts.init(tempChartDom.value);
  chartInstance_rain = echarts.init(rainChartDom.value);



})
onUnmounted(() => {
  if (chartInstance_temp != null && chartInstance_temp.dispose) {
    chartInstance_temp.dispose();
  }
  if (chartInstance_rain != null && chartInstance_rain.dispose) {
    chartInstance_rain.dispose();
  }
});

</script>
<style scoped>




.cal-button {
  display: flex;
  justify-content: space-between; /* 水平分布 */
}

.right-content {



}

.table-box {
  display: flex;
  flex-direction: row;  /* 子元素水平排列 */
  justify-content: space-between; /* 元素之间的间隔平均分布 */

}

.table-box-item{
  margin-left: 20px;
  flex: 1;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.chart-box {
  display: flex;
  justify-content: space-between; /* 元素之间的间隔平均分布 */
  margin-top: 20px;

}
.chart-box-item{
  height: 300px;
  width:500px;
}

.el-input-group {
  margin-bottom: 10px;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>